<template>
  <a-modal
    :visible="visible"
    okText="确认"
    cancelText="取消"
    :title="title"
    :maskClosable="false"
    :keyboard="false"
    @cancel="closeModal()"
    @ok="handleSubmit"
  >
    <!-- 表单html -->
    <a-form-model :model="formData" ref="ruleForm" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="一级分类" v-if="childModal">
        <span>{{handle == 'update' ? parentInfo.name : record.name}}</span>
      </a-form-item>
      <a-form-model-item :label="childModal ? '二级分类名称' : '一级分类名称'" prop="name">
        <a-input
          v-model="formData.name"
          placeholder="输入分类名称限2-6个汉字"
        />
      </a-form-model-item>
      <a-form-model-item label="是否有二级分类" v-if="!childModal" prop="hasTwoCategory">
        <a-radio-group
          style="width: 200px"
          :options="hasTwoCategoryList"
          v-model="formData.hasTwoCategory"
          :disabled="handle == 'update'"
        ></a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="海报来源" v-if="!childModal" prop="source">
        <a-radio-group
          style="width: 200px"
          :options="posterSourceList"
          v-model="formData.source"
          :disabled="handle == 'update'"
        ></a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sort">
        <a-input-number
          style="width: 270px"
          placeholder="填写大于0的整数，数字越大越靠后"
          v-model="formData.sort"
        />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
export default {
  name: "posterMenu-info",
  props: {
    record: {
      // 选中行数据
      type: Object,
      default() {
        return {};
      },
    },
    visible: {
      // 是否显示弹窗
      type: Boolean,
      default: false,
    },
    parentId: {
      // 父级id
      type: String,
      default: '0'
    },
    childModal: {
      type: Boolean,
      default: true
    },
    handle: {
      type: String
    },
    parentInfo: { //编辑二级分类时把 父节点(一级分类)信息带过来
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    title() {
      // 弹窗标题
      if(this.childModal) {
        return this.handle == 'update' ? "编辑二级分类" : "新增二级分类";
      }else {
        return this.record.id ? "编辑一级分类" : "新增一级分类";
      }
    },
  },
  data() {
    return {
      formData: {
        name: '', //分类名称
        hasTwoCategory: 1, //是否有二级分类
        source: 1, //海报来源
        sort: '' //排序
      }, // 表单
      rules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 6, message: '输入分类名称限2-6个汉字' }
        ],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur'}]
      },
      hasTwoCategoryList: [
        {label: '是',value: 1},
        {label: '否',value: 0}
      ],
      posterSourceList: [
        {label: '上传海报',value: 1},
        {label: '模版海报',value: 2}
      ]
    };
  },
  watch: {
    // 监听弹窗是否显示，回显数据
    visible(value) {
      if(value === true && this.handle == 'update') {
        this.getEchoFormInfo()
      }else {
        this.formData = {
          name: '', //分类名称
          hasTwoCategory: 1, //是否有二级分类
          source: 1, //海报来源
          sort: '' //排序
        } // 表单
      }
    },
  },
  mounted() {},
  methods: {
    getEchoFormInfo() { //如果是编辑 回显之前的数据
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = this.record[key]
      })
    },
    // 提交表单
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let url, params;
          if(this.childModal) { //新增 和 编辑二级分类
            params = {
              ...this.formData,
              parentId: this.handle == 'add' ? this.record.id : this.parentInfo.id,
              id: this.handle == 'update' ? this.record.id : '', //编辑时传当前编辑项的id
              grade: this.handle == 'add' ? 2 : '', //新增时 二级分类传2
              source: this.handle == 'add' ? this.record.source : this.parentInfo.source //新增二级分类时 海报来源传父节点的海报来源
            }
            url = `goldenhome/gh/poster_admin/poster/category/${this.handle == 'update' ? 'update' : 'add'}`;
            console.log(params, url)
          }else { //新增 和 编辑一级分类
            params = {
              ...this.formData,
              parentId: "0",
              id: this.handle == 'update' ? this.record.id : '', //编辑时传当前编辑项的id
              grade: this.handle == 'add' ? 1 : '' //新增时 一级分类传1
            }
            url = `goldenhome/gh/poster_admin/poster/category/${this.record.id ? 'update' : 'add'}`;
          }
          console.log(url,params)
          this.$post(url, { ...params }).then((res) => {
            if (res && res.returnCode === 1000) {
              this.$message.success("保存成功！");
              this.closeModal(true);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 关闭弹窗
    closeModal(freshTable) {
      this.$refs.ruleForm.resetFields();
      this.$emit("cancel", freshTable);
    },
  },
};
</script>